<template>
  <div>
    <span class="mc-ui-geometry-char" style="height: 20px; width: 220px; position: absolute; left: 20%; top: 23%; color: rgb(193, 23, 23);font-size: 120%;">物品溯源码: </span>
    <span class="mc-ui-geometry-char" style="height: 70px; width: 200px; position: absolute; left: 43%; top: 23.3%;font-size: 120%;align=left">{{ id }}</span>

    <div id="inner" class="qrconde" ref="qrCodeUrl"  style="position: absolute; left: 30%;  top: 30%; width: 200px; height: 200px"></div>
    <div id="magicalDragScene">
	    <i class="el-icon-user-solid" style="position: absolute;  color: black; left: 35%; top: 88%;font-size: 80%;">@蓝信科技提供数据溯源</i>
    </div>
  </div>
  
</template>

<script>
import axios from "axios";
import QRCode from 'qrcodejs2'

const host = '10.78.34.207:8080'
// const host = '192.168.2.106:8080'

var searchURL = window.location.search;
searchURL = searchURL.substring(1, searchURL.length);
var targetPageId = searchURL.split("&")[0].split("=")[1];

export default {
  name: "get",
  components: {
    QRCode,
  },
  data() {
    return {
      msg: "查询结果",
      purl: null,
      id:null,
      downloadData: {
        url: null,
        icon: require("./../../assets/logo.png"),
      },
    };
  },
  methods: {
    creatQrCode() {
      var routerParams = this.$route.query.uid;
      //http://192.168.2.106:8080/get?uid=2081
      this.id = routerParams
      this.downloadData.url =  `http://${host}/get?uid=${routerParams}`;
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: this.downloadData.url, // 需要转换为二维码的内容
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
  
  },
  mounted() {
    const that = this;
    this.creatQrCode();

    // window.onresize = () => {
    //     return (() => {
    //         window.screenWidth = document.body.clientWidth
    //         that.screenWidth = window.screenWidth
    //     })()
    // let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    //         let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    //         let l = w / 2 - this.$refs.wh.offsetWidth / 2;
    //         let t = h / 2 - this.$refs.wh.offsetHeight / 2;
    //         this.$refs.wh.style.left = l + "px"
    //         this.$refs.wh.style.top = t + "px"
  },
};
</script>

<style>
#get {
  /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #08111a;
  flex-direction: row;
  justify-content: center;
  margin-top: 60px; */
  display: flex;
  flex-direction: row;
  align-items: center; /*如果flex-direction：row；代表垂直居中 ；如果flex-direction：column；则代表水平居中*/
  justify-content: center; /*如果flex-direction：row；代表水平居中；如果flex-direction：column；则代表垂直居中*/
  width: 500px;
  height: 500px;
}


.ccolor {
  background: #fff;
}
.inner {
  position: absolute;
  /* background-color: darkcyan; */

  width: 500px;
  height: 200px;
  top: 20%;
  left: 40%;
  margin-top: -100px;
  margin-left: -150px;
  font-size: 130%;
}
.box-g {
  position: relative;
  width: 50%;
  height: 630px;
}
.box-g img {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
}
.ltag {
  position: fixed;
  padding-bottom: 111px;
  width: 500px;
  height: 50px;
}

h1,
h2 {
  font-weight: normal;
  color: #42b983;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
